<template>
  <div class="publish">
    <el-card class="card" shadow="never">
      <div class="baseInfo">
        <p>基础信息</p>
        <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
          <div class="one">
            <el-form-item label="发布者" prop="publisher">
              <el-input v-model="form.publisher" style="width: 200px" disabled />
            </el-form-item>
            <el-form-item label="接收者" prop="subscriber">
              <el-select
                v-model="form.subscriber"
                style="width: 200px"
                placeholder="请选择接收对象"
                clearable
              >
                <el-option label="管理员" value="0" />
                <el-option label="教师" value="1" />
                <el-option label="学生" value="2" />
                <el-option label="所有人" value="3" />
              </el-select>
            </el-form-item>
          </div>
          <div class="one">
            <el-form-item label="发布日期" prop="pub_date" >
              <el-date-picker
                disabled
                v-model="form.pub_date"
                type="datetime"
                style="width: 200px"
                placeholder="请选择发布日期"
              />
            </el-form-item>
            <el-form-item label="公告标题" prop="title">
              <el-input
                clearable
                v-model="form.title"
                style="width: 300px; margin-right: 20px"
                placeholder="请输入公告标题"
              />
              <el-button type="primary" :icon="Promotion" @click="handleConfirmClick">确认发布</el-button>
            </el-form-item>
          </div>
        </el-form>
        <div class="content">
          <p>公告内容</p>
          <BasicEditor ref="editorRef" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessageBox } from 'element-plus'
import { Promotion } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import { formatNormalData } from '@/utils/formatDate.js'
import BasicEditor from './components/BasicEditor.vue'
import { rules } from './config/baseInfoRules.js'
import { binMsg } from '@/global/api.js'

const store = useStore()
const formRef = ref(null)
const editorRef = ref(null)
const userInfo = computed(() => store.state.userModule.userInfo)

// 公告表单
const form = ref({
  publisher: userInfo.value.name,
  subscriber: '',
  pub_date: new Date(),
  title: '',
  content: ''
})

// 点击确定按钮
const handleConfirmClick = async () => {
  form.value.pub_date = formatNormalData(form.value.pub_date)
  form.value.content = editorRef.value.state.content
  // console.log(form.value)
  binMsg().closeAll()
  await formRef.value.validate(async (valid) => {
    if (valid) {
      if (form.value.content === '') return binMsg('warning', '公告内容不能为空！')
      send()
    }
  })
}

// 发布公告
const send = async () => {
  try {
    await ElMessageBox.confirm('确认发布公告？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true
    })
    // 发起请求修改信息
    store.dispatch('noticesManageModule/createAction', form.value)
    reset()
    editorRef.value.state.content = ''
  } catch (e) {
    binMsg('info', '已取消')
  }
}

// 重置
const reset = () => {
  // 对该表单项进行重置，将其值重置为初始值并移除校验结果
  formRef.value.resetFields()
}
</script>

<style lang="less" scoped>
.publish {
  .card {
    height: 900px;
    .baseInfo {
      // margin-left: 20px;
      p {
        font-size: 18px;
        font-weight: 700;
      }
      .one {
        display: flex;
        .el-form-item {
          margin-right: 100px;
        }
      }
    }
  }
}
</style>
